<template>
  <div>
    <div class="df jcsb">
      <h4>商品分类</h4>
      <el-button type="primary" @click="dialogFormVisible = true"
        >添加分类</el-button
      >
    </div>
    <hr />
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="序号" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>

      <el-table-column label="分类名称" width="180">
        <template slot-scope="scope">
          <span v-if="!scope.row.isEdit">{{ scope.row.cateName }}</span>
          <el-input v-else size="mini" v-model="scope.row.cateName"></el-input>
        </template>
      </el-table-column>

      <el-table-column label="名称" width="180">
        <template slot-scope="scope">
          <el-switch
            :disabled="!scope.row.isEdit"
            v-model="scope.row.state"
            :active-value="scope.row.state === 0 ? false : true"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            :type="scope.row.isEdit ? 'success' : 'default'"
            @click="handleEdit(scope.$index, scope.row)"
            >{{ scope.row.isEdit ? "完成" : "编辑" }}</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="mt20"
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[2, 5]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>
  
    <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="活动名称" :label-width="formLabelWidth">
          <el-input v-model="formData.cateName" autocomplete="off"></el-input>
        </el-form-item>
        <div>
          是否操作
          <el-switch
            @change="addx"
            v-model="value2"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
        </div>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false"
          ><span @click="onSubmit">确 定</span></el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { goodsCate, CategoryDeletion, accountAdd } from "@/api/user";
import { getCateListReq, editCateReq } from "@/api/goods";
import { mapActions } from "vuex";
export default {
  data() {
    return {
      value2: false,
      currentPage: 1,
      pageSize: 3,
      total: 0,
      tableData: [],
      dialogTableVisible: false,
      dialogFormVisible: false,
      formData: {
        cateName: "",
        state: 1,
      },
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      formLabelWidth: "120px",
    };
  },
  methods: {
    ...mapActions("user", ["accountAdd"]),
    async onSubmit() {
      let res = await accountAdd(this.formData);
      let { msg } = res.data;
      this.getData();
      console.log(msg);
    },
    addx() {
      this.value2 ? this.formData.state = 1 : this.formData.state = 0;
      console.log(this.value2);
    },
    //改变页码
    handleSizeChange(val) {
      this.pageSize = val;
      this.getData();
    },
    //改变当前页
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getData();
    },

    handleEdit(index, row) {
      console.log(index, row);
    },
    async handleDelete(index, row) {
      let res = await CategoryDeletion({ id: row.id });
      this.getData();
    },

    async getData() {
      let currentPage = this.currentPage;
      let pageSize = this.pageSize;
      let res = await goodsCate({
        currentPage,
        pageSize,
      });

      let { data, total } = res.data;
      data.forEach((v) => {
        //把state转换为布尔值
        v.state = v.state === 1 ? true : false;
        //添加一个字段 是否可编辑
        v.isEdit = false;
      });
      //数据赋值
      this.total = total;
      this.tableData = data;
      //如果获取data为[] 且currentPage>1 退回上一页
      if (data.length === 0 && this.currentPage !== 1) {
        this.currentPage--;
        this.getData();
      }
    },
    async handleEdit(index, row) {
      //把可编辑状态取反
      row.isEdit = !row.isEdit;
      //发送请求
      if (!row.isEdit) {
        // 发送请求
        let res = await editCateReq({
          ...row,
          state: row.state ? 1 : 0,
        });
      }
    },
    btnx(x) {
      console.log(x);
    },
  },
  created() {
    this.getData(); //生命周期渲染前
  },
};
</script>

<style lang="scss" scoped></style>
